<template>
    <!--后端前台页面布局-->
    <div class="max">
        <el-container>
            <!--侧边导航栏-->
            <el-aside width=null height="100%">
                <el-menu
                        :unique-opened="true"
                        class="el-menu-vertical-demo"
                        background-color="#545c64"
                        text-color="#fff"
                        active-text-color="#ffd04b"
                        :collapse="isCollapse"
                        :key="menuData.id"
                        router
                >
                        <MenuTree :menuData="menuData"></MenuTree>
                </el-menu>
            </el-aside>
            <el-container>
                <el-header STYLE="width: 100%">
                    <!--控制侧边导航栏收缩-->
                    <div class="h-button" style="display: inline-block">
                        <el-radio-group v-model="isCollapse">
                            <el-radio-button :label="false"><i class="el-icon-s-fold"></i>
                            </el-radio-button>
                            <el-radio-button :label="true"><i class="el-icon-s-fold"></i>
                            </el-radio-button>
                        </el-radio-group>
                    </div>
                    <!-- 个人头像-->
                    <div class="tok">
                        <el-dropdown>
                            <span class="el-dropdown-link">
                                <el-avatar
                                        src="https://img2.baidu.com/it/u=1902359393,1414495830&fm=26&fmt=auto&gp=0.jpg">
                                </el-avatar>
                            </span>
                            <el-dropdown-menu slot="dropdown">
                                <el-dropdown-item >首页</el-dropdown-item>
                                <el-dropdown-item @click.native="logout">退出登录aaa</el-dropdown-item>
                            </el-dropdown-menu>
                        </el-dropdown>
                    </div>
                    <!--                标签页-->
                </el-header>

                <el-divider></el-divider>
                <!--                底部区域-->
                <el-main>
                    <router-view/>
                </el-main>
            </el-container>
        </el-container>
    </div>
</template>

<script>
    import MenuTree from "../../components/menuTree";

    export default {
        name: "homepage",
        components: {MenuTree},
        data() {
            return {
                menuData: [],
                //控制侧边导航栏伸缩
                isCollapse: true,
                userData: {}
            };
        },
        created() {
            this.initMenu();
            this.$router.push("/nullpage")
        },
        methods: {
            //获得菜单数据
            initMenu() {
                var that = this;
                this.$http.get("/system/Permission/findUserPermissionToInitList").then(function (success) {
                    that.menuData = success.data.result.permissions;
                    that.userData = success.data.result.user;
                });
            },
            logout() {
                var that = this;
                var token = sessionStorage.getItem("token")
                this.$http.get(`/sso/logout/${token}`).then(function (success) {
                    if (success.data.code == 200) {
                        that.$message.success(success.data.msg)
                        sessionStorage.removeItem("token")
                        that.$router.push("/")
                    }
                })
            },
        }
    }
</script>
<style scoped>
    .el-aside {
        height: 100vh;
    }

    .tok {
        float: right;
    }

    .el-dropdown-link {
        float: left;
        margin-right: 0;
        cursor: pointer;
        color: #409EFF;
    }


    .h-crumbs {
        float: left;
        margin-top: 15px;
        padding: 0 10px;
        padding-top: 0px;
        padding-right: 10px;
        padding-bottom: 0px;
        padding-left: 10px;
    }

    .h-button {
        float: left;
        width: 120px;

    }

    .el-menu-vertical-demo {
        width: 30px;
        height: 100%;
    }

    .el-menu-vertical-demo:not(.el-menu--collapse) {
        width: 200px;
        height: 100%;
    }

    #daohang {

        width: 200px;
        z-index: 1000;
        position: relative;
        top: -399px;
        left: 12%;
        height: 400px;

    }

</style>